<!-- 环形进度条组件 -->
<template>
  <div style="text-align:center">
    <animate-number :formatter="formatter" :to="percentage" duration="600" easing="easeOutQuad" from="1" v-if="percentage" v-show="false"></animate-number>
    <svg :height="size + 'px'" :width="size + 'px'" class="progress-svg" ref="svg">
      <defs>
        <linearGradient :id="id" x1="0%" x2="0%" y1="0%" y2="100%">
          <stop :style="'stop-color:' + startColor + ';stop-opacity:1'" offset="0%" />
          <stop :style="'stop-color:' + endColor + ';stop-opacity:1'" offset="100%" />
        </linearGradient>
      </defs>
      <template v-if="showSign">
        <text
          :fill="`url(#${id})`"
          :style="{'font-size': (size-padding) / 8, 'font-weight': 500}"
          :x="size / 2"
          :y="size / 2"
          style="text-anchor: middle;dominant-baseline: middle;"
        >{{aminateNum}}%</text>
        <text
          :style="{'font-size': (size-padding) / 13}"
          :x="size / 2"
          :y="size * 1.4 / 2.2"
          fill="#fff"
          style="text-anchor: middle;"
          v-if="middleLabel"
        >{{middleLabel}}</text>
        <circle
          :cx="size / 2"
          :cy="size / 2"
          :r="radius"
          :stroke="backCircleColor"
          :stroke-width="strokeWidth"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <circle
          :cx="size / 2"
          :cy="size / 2"
          :r="radius"
          :stroke="`url(#${id})`"
          :stroke-dasharray="strokeDasharray"
          :stroke-dashoffset="strokeDashoffset"
          :stroke-width="strokeWidth"
          class="progress-line"
          fill="none"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <circle
          :cx="size / 2"
          :cy="size / 2"
          :r="radius / 1.15"
          :stroke="`url(#${id})`"
          class="line-circle"
          fill="none"
          stroke-dasharray="1 6"
          stroke-linecap="round"
          stroke-miterlimit="15"
          stroke-width="3"
        >
          <animateTransform
            attributeName="transform"
            attributeType="XML"
            dur="30s"
            from="0 200 200"
            repeatCount="indefinite"
            to="360 200 200"
            type="rotate"
          />
        </circle>
      </template>
    </svg>
  </div>
</template>

<script>
import rangeStr from '@utils/base/rangeStr'
export default {
  data() {
    return {
      num: 0,
      radius: 0,
      showSign: false,
      size: 0,
      id: rangeStr(),
      aminateNum: 0
    }
  },
  props: {
    // 百分比（必填）（0-100）
    percentage: {
      type: Number,
      default: 90
    },
    // 宽度
    width: {
      type: Number
    },
    // 高度
    height: {
      type: Number
    },
    // 是否是逆时针
    isReverseClock: {
      type: Boolean,
      default: true
    },
    // 环形图距离边缘距离
    padding: {
      type: Number,
      default: 10
    },
    // 中间的文字
    middleLabel: String,
    // 开始颜色
    startColor: {
      type: String,
      default: '#5db6c4'
    },
    // 结束颜色
    endColor: {
      type: String,
      default: '#8bc86e'
    },
    // 背景环颜色
    backCircleColor: {
      type: String,
      default: 'rgba(125,125,125,.2)'
    }
  },
  watch: {
    percentage() {
      this.num = this.percentage
    }
  },
  mounted() {
    const parentEle = this.$el.parentElement
    // 环形图大小
    this.size = this.width && this.height ? Math.min(this.width, this.height) : this.width || this.height || Math.min(parentEle.clientHeight, parentEle.clientWidth)
    // 边框大小
    this.strokeWidth = this.size / 20
    // 半径
    this.radius = this.size / 2 - this.padding
    this.$nextTick(() => {
      this.num = this.percentage
    })
    // 显示
    this.showSign = true
  },
  computed: {
    // 周长
    perimeter() {
      return 2 * Math.PI * this.radius
    },
    strokeDasharray() {
      return `${this.perimeter}px ${this.perimeter}px`
    },
    strokeDashoffset() {
      return (this.isReverseClock ? this.num - 100 : 100 - this.num) / 100 * this.perimeter + 'px'
    }
  },
  methods: {
    formatter(val) {
      this.aminateNum = parseInt(val)
    }
  }
}
</script>

<style>
.progress-svg {
  transform-origin: 50% 50%;
}
.line-circle {
  transform-origin: 50% 50%;
  transform: scale(0.9);
}
.progress-line {
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  transition: stroke-dashoffset 0.5s ease-in 0.1s;
}
</style>
